<template>
	<el-card class="layout-query">
		<el-form ref="queryRef" :inline="true" :model="state.queryForm" @keyup.enter="getDataList()">
			<el-form-item prop="projectCode">
				<el-input v-model="state.queryForm.projectCode" placeholder="项目编码"></el-input>
			</el-form-item>
			<el-form-item prop="projectName">
				<el-input v-model="state.queryForm.projectName" placeholder="项目名称"></el-input>
			</el-form-item>
			<el-form-item prop="investorName">
				<el-input v-model="state.queryForm.investorName" placeholder="项目投资方名称"></el-input>
			</el-form-item>
			<!--			<el-form-item prop="contactName">-->
			<!--				<el-input v-model="state.queryForm.contactName" placeholder="项目联系人"></el-input>-->
			<!--			</el-form-item>-->
			<el-form-item>
				<el-button icon="Search" type="primary" @click="getDataList()">查询</el-button>
			</el-form-item>
			<el-form-item>
				<el-button icon="RefreshRight" @click="reset(queryRef)">重置</el-button>
			</el-form-item>
		</el-form>
	</el-card>

	<el-card>
		<el-space>
			<el-space>
				<el-button v-auth="'project:info:save'" icon="Plus" type="primary" @click="addOrUpdateHandle()">新增</el-button>
			</el-space>
			<el-space>
				<el-button v-auth="'project:info:delete'" icon="Delete" plain type="danger" @click="deleteBatchHandle()"> 批量删除 </el-button>
			</el-space>
			<el-space>
				<el-button icon="Download" @click="downloadExcel()">导出</el-button>
			</el-space>
		</el-space>
		<el-table v-loading="state.dataListLoading" :data="state.dataList" border class="layout-table" @selection-change="selectionChangeHandle">
			<el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
			<el-table-column type="index" header-align="center" align="center" fixed="left" label="序号" width="80"></el-table-column>
			<el-table-column prop="projectCode" label="项目编码" header-align="center" align="center" show-overflow-tooltip fixed="left" min-width="150">
				<template #default="scope">
					<el-link type="primary" :underline="false" @click="toDetail(scope.row.id)">{{ scope.row.projectCode }} </el-link>
				</template>
			</el-table-column>
			<el-table-column
				prop="projectName"
				label="项目名称"
				header-align="center"
				align="center"
				show-overflow-tooltip
				fixed="left"
				min-width="120"
			></el-table-column>
			<el-table-column
				prop="industryCategory"
				label="产业分类"
				header-align="center"
				align="center"
				show-overflow-tooltip
				fixed="left"
				min-width="120"
			></el-table-column>
			<el-table-column
				prop="constructionContent"
				label="项目建设内容"
				header-align="center"
				align="left"
				show-overflow-tooltip
				min-width="120"
			></el-table-column>
			<el-table-column
				prop="plannedInvestment"
				label="项目计划总投资(万元)"
				header-align="center"
				align="center"
				show-overflow-tooltip
				min-width="180"
			></el-table-column>
			<el-table-column
				prop="investorName"
				label="项目投资方名称"
				header-align="center"
				align="center"
				show-overflow-tooltip
				min-width="150"
			></el-table-column>
			<el-table-column prop="contactInfo" label="项目联系人及联系方式" header-align="center" align="center" show-overflow-tooltip min-width="200">
				<template #default="scope">
					{{ scope.row.contactName + '/' + scope.row.contactPhone }}
				</template>
			</el-table-column>
			<el-table-column
				prop="weeklyProgress"
				label="本周进度"
				header-align="center"
				align="center"
				show-overflow-tooltip
				min-width="150"
			></el-table-column>
			<el-table-column
				prop="startTime"
				label="项目开始推进时间"
				header-align="center"
				align="center"
				show-overflow-tooltip
				min-width="150"
				:formatter="formatter"
			></el-table-column>
			<el-table-column
				prop="currentStatus"
				label="项目当前状态"
				header-align="center"
				align="center"
				show-overflow-tooltip
				min-width="120"
			></el-table-column>
			<el-table-column
				prop="statusDuration"
				label="当前状态停留时间"
				header-align="center"
				align="center"
				show-overflow-tooltip
				min-width="150"
			></el-table-column>
			<el-table-column
				prop="endTime"
				label="项目流程结束时间"
				header-align="center"
				align="center"
				show-overflow-tooltip
				:formatter="formatter"
				min-width="150"
			></el-table-column>

			<el-table-column prop="linkedLeaderInfo" label="包联领导及联系方式" header-align="center" align="center" show-overflow-tooltip min-width="200">
				<template #default="scope">
					{{ scope.row.linkedLeader + '/' + scope.row.linkedLeaderPhone }}
				</template>
			</el-table-column>
			<el-table-column
				prop="projectLeaderInfo"
				label="包联单位项目负责干部/联系电话"
				header-align="center"
				align="center"
				show-overflow-tooltip
				min-width="200"
			>
				<template #default="scope">
					{{ scope.row.projectLeader + '/' + scope.row.leaderPhone }}
				</template>
			</el-table-column>
			<el-table-column
				prop="linkedDepartment"
				label="包联单位"
				header-align="center"
				align="center"
				show-overflow-tooltip
				min-width="150"
			></el-table-column>
			<el-table-column prop="remark" label="备注" header-align="center" align="left" show-overflow-tooltip min-width="120"></el-table-column>
			<el-table-column prop="creatorName" label="创建者" header-align="center" align="center" show-overflow-tooltip min-width="120"></el-table-column>
			<el-table-column label="操作" fixed="right" header-align="center" align="center" width="180">
				<template #default="scope">
					<el-button v-auth="'project:project-report:page'" type="success" link @click="openProgress(scope.row.id)"> 查看进度 </el-button>
					<el-button v-auth="'project:info:update'" type="primary" link @click="addOrUpdateHandle(scope.row.id)">修改 </el-button>
					<el-button v-auth="'project:info:delete'" type="danger" link @click="deleteBatchHandle(scope.row.id)">删除 </el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination
			:current-page="state.page"
			:page-sizes="state.pageSizes"
			:page-size="state.limit"
			:total="state.total"
			layout="total, sizes, prev, pager, next, jumper"
			@size-change="sizeChangeHandle"
			@current-change="currentChangeHandle"
		>
		</el-pagination>

		<!-- 弹窗, 新增 / 修改 -->
		<add-or-update ref="addOrUpdateRef" @refresh-data-list="getDataList"></add-or-update>
		<!--  查看进度  -->
		<view-progress ref="viewProgressRef"></view-progress>
	</el-card>
</template>

<script setup lang="ts" name="ProjectInfoIndex">
import { useCrud } from '@/hooks'
import { reactive, ref } from 'vue'
import { IHooksOptions } from '@/hooks/interface'
import AddOrUpdate from './add-or-update.vue'
import ViewProgress from './view-progress.vue'
import { formatterDate } from '@/utils/dateFormat'
import { TableColumnCtx } from 'element-plus'
import { useRouter } from 'vue-router'
import { useLogLoginExportApi } from '@/api/sys/log'
import { useInfoExportApi } from '@/api/project/info'

const state: IHooksOptions = reactive({
	dataListUrl: '/project/info/page',
	deleteUrl: '/project/info',
	queryForm: {
		projectCode: '',
		projectName: '',
		investorName: '',
		contactName: '',
		contactPhone: '',
		startDateTime: '',
		endDateTime: ''
	}
})

const queryRef = ref()
const addOrUpdateRef = ref()
const viewProgressRef = ref<InstanceType<typeof ViewProgress>>()
const router = useRouter()
const addOrUpdateHandle = (id?: number) => {
	addOrUpdateRef.value.init(id)
}
const formatter = (row: any, column: TableColumnCtx<any>) => {
	return formatterDate(row, column.property)
}

const downloadExcel = () => {
	useInfoExportApi()
	return
}

const toDetail = (id: number) => {
	router.push(`/project/detail/${id}`)
}

const openProgress = (id: number) => {
	viewProgressRef.value?.open(id)
}

const { getDataList, selectionChangeHandle, sizeChangeHandle, currentChangeHandle, deleteBatchHandle, reset } = useCrud(state)
</script>
